/**
* Created by ren on 2016/12/30.
*/
<template>
  <div class='cartAccount page-wrap'>
    <Nav></Nav>
    <div class="container">
      <div class="cartaccount page" v-if="AddressData!==''">
        <div class="title">确定收货地址</div>
        <div class="address-wrap">
          <div v-for="(item,index) in AddressData">
            <img src="../../assets/true2.png" style="margin-right: 15px;float: left">
            <div style="margin-bottom: 6px;margin-top: 4px;">{{item.province}} {{item.city}} {{item.area}}
              {{item.detailAddress}} （{{item.consigneeName}} 收)
            </div>
            <span style="margin-left: 39px;">{{item.mobile}}</span>
            <span style="float: right;color: #0171d9;cursor:pointer;" @click="updateOrderAddress">修改地址</span>
          </div>
        </div>
        <router-link :to="{name:'orderAddress'}">
          <button class="btn"
                  style="color: white;width: 177px;height: 43px;margin-left: 5px;margin-top: 20px;background: #f48315;font-size: 16px">
            <span style="margin-right: 18px">+</span><span>使用新地址</span>
          </button>
        </router-link>
      </div>
      <div class="orderdetail page" v-if="goodsData!==''">
        <div class="title">确定订单信息</div>
        <div class="goodlist">
          <div class="item" style="border-bottom:0;height: 245px">
            <img v-lazy="loadImg(goodsData[0])" style="width: 220px;height: 220px">
            <div style="margin-top: 30px;">
              <div style="font-size: 20px;color: #333333;margin-bottom: 15px">{{goodsData[1]}}</div>
              <div style="font-size: 18px;color: #ff9900;margin-bottom: 40px">{{goodsData[3]}}</div>
              <div style="font-size: 16px;color: #999999;margin-bottom: 20px;margin-left: 10px;">
                规格：{{goodsData[3]}}{{(goodsData[4]/1000).toFixed(2)}}g
              </div>
              <div style="font-size: 16px;color: #999999;margin-left: 10px;">
                重量：{{(goodsData[4]/1000).toFixed(2)}}g*{{goodsData[5]}}
              </div>
            </div>
            <div style="float: right">
              <div style="color: #e60012;margin-bottom: 15px">￥<span style="font-size:24px">{{((parseInt(goodsData[2])+parseInt(goodsData[8]))*goodsData[4]/100000).toFixed(2).split('.')[0]}}</span>.{{((parseInt(goodsData[2])+parseInt(goodsData[8]))*goodsData[4]/100000).toFixed(2).split('.')[1]}}
              </div>
              <div>手工费：{{(goodsData[8]/100).toFixed(2)}}元/g</div>
            </div>
          </div>
          <div class="item total" v-if="AddressData!==''">
            <div style="margin-top: 0px"><span>配送方式</span> <span style="float: right">顺丰快递<span style="color:#fd8f23;">￥<span
              style="font-size: 18px">{{(AddressData[0].configVo.expressPrice/100).toFixed(2).split('.')[0]}}</span>.{{(AddressData[0].configVo.expressPrice/100).toFixed(2).split('.')[1]}}</span></span>
            </div>
            <div><span>保价费</span> <span style="float: right;color:#fd8f23;">￥<span style="font-size: 18px">{{(AddressData[0].configVo.valuationPrice/100).toFixed(2).split('.')[0]}}</span>.{{(AddressData[0].configVo.valuationPrice/100).toFixed(2).split('.')[1]}}</span>
            </div>
            <div><span><img :src="isUseGold?require('../../assets/true3.png'):require('../../assets/hollow.png')"
                            width="18" height="18"
                            style="margin-right: 10px;margin-top: -5px;cursor: pointer" @click="useGold"><span>金蛋：可使用{{ShopPriceData.deductionGlodBean}}金蛋抵扣</span></span>
              <span
                style="float: right;color:#e31818;">￥<span style="font-size: 18px">-{{(ShopPriceData.deductionPrice/100.0).toFixed(2).split('.')[0]}}</span>.{{(ShopPriceData.deductionPrice/100.0).toFixed(2).split('.')[1]}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="invoice page" v-if="AddressData!==''">
        <div class="title">开具发票</div>
        <div class="invoice-con">
          <div class="select">
            <div>
              <label>类型</label> <span>
              <img
                :src="invoiceStyle==='person'?require('../../assets/true4.png'):require('../../assets/hollow1.png')"
                @click="selectUseGold('person')">
              <span style="margin-left: 15px">个人</span></span>
              <span style="margin-left: 67px"><img
                :src="invoiceStyle==='company'?require('../../assets/true4.png'):require('../../assets/hollow1.png')"
                @click="selectUseGold('company')">
                <span style="margin-left: 15px">公司</span></span>
              <span style="margin-left: 130px"><label style="margin-right: 30px">抬头</label>
                <input type="text" style="width: 350px" v-model="ttName"></span>
            </div>
            <div>
              <label>类型</label>
              <button :class="{btn:true,active:goldStyle===0}" @click="selectGoldStyle(0)">金条</button>
              <button :class="{btn:true,active:goldStyle===1}" @click="selectGoldStyle(1)">黄金饰品</button>
            </div>
            <div style="color:#fd8f23;font-size: 16px">温馨提示：黄金属于贵重物品请务必亲自开箱检查确认签收。</div>
          </div>
          <div class="msg-wrap">
            <div class="msg">
              <div style="margin-bottom: 10px"><label>实付款</label>：<span style="color: red">¥<span>{{totalPrice.split('.')[0]}}</span>.{{totalPrice.split('.')[1]}}</span>
              </div>
              <div style="margin-bottom: 10px"><label>寄送至：</label><span>{{AddressData[0].province}}{{AddressData[0].city}}{{AddressData[0].area}}{{AddressData[0].detailAddress}}</span>
              </div>
              <div><label>收货人：</label><span>{{AddressData[0].consigneeName}}</span><span style="margin-left: 20px">{{AddressData[0].mobile}}</span>
              </div>
            </div>
            <button class="btn" @click="confirmOrder">提交订单</button>
          </div>
        </div>
      </div>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import Nav from '../Nav'

  import API from '../../api'
  import Notify from '../../components/Notify'
  export default {
    name: 'cartAccount',
    components: {
      Nav,
      Notify
    },
    data: function () {
      return {
        isUseGold: false,
        invoiceStyle: 'person',
        goldStyle: 0,
        goodsData: '',
        ShopPriceData: '',
        notifyStatus: 2,
        AddressData: '',
        ttName: '',
        totalPrice: '',
        address: ''
      }
    },
    methods: {
      loadImg: function (path) {
        return API.path + path
      },
      updateOrderAddress: function () {
        this.$cookie.set('addressData', JSON.stringify(this.AddressData[0]))
        this.$router.push({name: 'updateOrderAddress'})
      },
      useGold: function () {
        this.isUseGold = !this.isUseGold
        if (this.isUseGold) {
          this.totalPrice = ((this.ShopPriceData.goldPrice + this.AddressData[0].configVo.expressPrice + this.AddressData[0].configVo.valuationPrice - this.ShopPriceData.deductionPrice) / 100.0).toFixed(2)
        } else {
          this.totalPrice = ((this.ShopPriceData.goldPrice + this.AddressData[0].configVo.expressPrice + this.AddressData[0].configVo.valuationPrice) / 100).toFixed(2)
        }
      },
      selectUseGold: function (style) {
        this.invoiceStyle = style
      },
      selectGoldStyle: function (index) {
        this.goldStyle = index
      },
      getShopPrice: function () {
        this.$http.post(API.getShopPrice, {
          userId: this.$cookie.get('id'),
          standardId: this.$cookie.get('sp_standardId'),
          qishu: 1
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.ShopPriceData = result.object
            this.totalPrice = ((this.ShopPriceData.goldPrice + this.AddressData[0].configVo.expressPrice + this.AddressData[0].configVo.valuationPrice) / 100.0).toFixed(2)
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      findAddressList: function () {
        this.$http.post(API.findAddressList, {
          userId: this.$cookie.get('id'),
          nextPage: 0,
          pageSize: 1,
          type: 0,
          weight: this.goodsData[4],
          shopInfo: this.$cookie.get('sp_shopInfo'),
          isDafault: 1,
          qishu: 1
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            if (result.object.length === 0) {
              this.notifyStatus = '0|收货地址为空，3s后跳转至添加地址页面！'
              setTimeout(() => {
                this.$router.push({name: 'orderAddress'})
              }, 3000)
              return
            }
            this.getShopPrice()
            this.AddressData = result.object
            this.address = this.AddressData[0].province + this.AddressData[0].city + this.AddressData[0].area + this.AddressData[0].detailAddress
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      confirmOrder: function () {
        if (this.ttName) {
          this.$cookie.set('receipttype', this.invoiceStyle === 'person' ? 1 : 2)
          this.$cookie.set('receiptHead', this.ttName)
          this.$cookie.set('shoptype', this.goldStyle === '0' ? 1 : 2)
          this.goodsOrder()
          /**
           * this.$router.push({'path': '/orderConfirm/sp'})
           */
        } else {
          this.notifyStatus = '0|' + '请输入发票抬头信息！'
        }
      },
      goodsOrder: function () {
        this.$http.post(API.saveOrderOne, {
          userId: this.$cookie.get('id'),
          qishu: 1,
          addressId: this.AddressData[0].id,
          shopInfo: this.$cookie.get('sp_shopInfo'),
          isGuarlantee: 1,
          isUseGoldBean: this.isUseGold ? 1 : 0,
          receipttype: this.invoiceStyle === 'person' ? 1 : 2,
          receiptHead: this.ttName,
          shoptype: this.goldStyle === '0' ? 1 : 2,
          isReceipt: 1,
          orderNumber: 1,
          isRenew: 0
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            result.object.address = this.address
            this.$cookie.set('orderObject', JSON.stringify(result.object))
            this.$router.push({'name': 'orderConfirm', params: {style: 'sp'}})
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    mounted: function () {
      var shopVo = unescape(this.$cookie.get('sp_shopVo'))
      this.goodsData = shopVo.split(',')
      this.findAddressList()
    }
  }
</script>
